<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wangjx
 * @LastEditTime: 2022-01-10 19:01:08
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom3_container" id="container4" style="height: 95%"></div>
</template>
<script>
import { Pie } from '@antv/g2plot';
  export default{
   data(){
      return{
         dataArr:[  { type: '西门', value: 28 },
  { type: '南门', value: 21 },
  { type: '东门', value: 18 },
  { type: '北门', value: 14 },
  { type: '正门', value: 52 },]
       }
   },
   created(){

   },
   mounted(){
    this.initChart()   },
   methods:{
     //创建一个折线图实例对象
     initChart(){
      const piePlot = new Pie('container4', {
  appendPadding: 10,
  data:this.dataArr,
  angleField: 'value',
  colorField: 'type',
  radius: 0.9,
  label: {
    type: 'inner',
    offset: '-30%',
    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    style: {
      fontSize: 14,
      textAlign: 'center',
    },
  },
  interactions: [{ type: 'element-active' }],
});

piePlot.render();}
   }
  }
</script>
<style scoped>

</style>